'use client';

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbSeparator,
} from '@/components/ui/breadcrumb';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import React from 'react';

export function BreadcrumbComp() {
  const pathname = usePathname();
  const items = pathname.split('/');
  return (
    <Breadcrumb>
      <BreadcrumbList>
        {items.map((item, index) => (
          <React.Fragment key={item}>
            <BreadcrumbItem>
              <BreadcrumbLink asChild>
                <Link
                  href={
                    item === 'product'
                      ? items
                          .slice(0, index + 1)
                          .join('/')
                          .replace(/\/product.*/, '')
                      : items.slice(0, index + 1).join('/')
                  }
                >
                  {item}
                </Link>
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
          </React.Fragment>
        ))}
      </BreadcrumbList>
    </Breadcrumb>
  );
}
